import { ref, watchEffect, toValue } from "vue";

const useFetch = ( url ) => {
	const data = ref( null );
	const error = ref( null );
	
	watchEffect( async () => {
		data.value = null;
		error.value = null;
		const urlValue = toValue( url );
		try {
			await timeout();
			
			const res = await fetch( urlValue );
			data.value = await res.json();
		} catch ( e ) {
			error.value = e;
		}
	} );
	return {
		data,
		error
	};
}

const timeout = () => {
	return new Promise ((resolve, reject) => {
		setTimeout(() => {
			if ( Math.random() > 0.3 ) {
				resolve();
			} else {
				reject(new Error('Random Error'));
			}
		})
	});
}

export default useFetch;